<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <div id="app">
        {{ firstName }} <br>
        {{ lastName }} <br>
        {{ fullName }} <br>
        <button @click="change">change</button>
        <div v-for="(p, index) in classmates" :key="p.id">
            {{ `${index}.${p.name}` }}
        </div>
    </div>

    <script type="text/javascript">

        var app = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三',
                classmates: [
                    { id: 1, name: "许一" },
                    { id: 2, name: "许二" },
                    { id: 3, name: "许三" },]
            },
            // 计算属性 不支持异步
            computed: {
                fullName: {
                    get() { return this.firstName + this.lastName; },
                    set(val) { this.value = val; },
                },
            },
            // 监视属性 支持异步
            watch: {
                classmates: {
                    // 深度监视 可以监视对象里面的属性，与数组的item
                    deep: true,
                    // 初始化的时候运行一次
                    immediate: true,
                    // 回调函数
                    handler(newValue, oldValue) {
                        console.log(newValue)
                    },
                },
            },
            methods: {
                change() { this.classmates[0].name = '45678'; }
            }
        });
    </script>
</body>

</html>